<% include ../partials/header %>

  <div class="container mt-4">    
    <div class="row">
      <div class="col">
      </div>
      <div class="col-12 col-sm-12 col-lg-9">
        <div class="card shadow border-0">          
          <div class="card-body">
            <h1 class="text-center">Create Campground</h1>
            <p>
              <small class="text-muted">Fields marked * are required.</small>
            </p>
            <form action="/campgrounds" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
              <div class="form-group">
                <label for="">Name*</label>
                <input type="text" class="form-control" name="campground[name]" placeholder="Name" required>
                <div class="invalid-feedback">
                  Please provide a campground name.
                </div>
              </div>
              <div class="form-group">
                <label for="">Price/Night*</label>
                <input type="number" class="form-control" name="campground[price]" placeholder="Price/Night" min="0.01" step="0.01" required>
                <div class="invalid-feedback">
                  Please provide a price.
                </div>
              </div>
              <div class="input-group mb-3">
                <div class="custom-file">
                  <input type="file" name="image" accept="image/*" class="custom-file-input" id="image" aria-describedby="inputGroupFileAddon01"
                    required>
                  <div class="invalid-feedback">
                    Please upload an image of your campground.
                  </div>
                  <label class="custom-file-label" for="inputGroupFile01">Image*</label>
                </div>
              </div>
              <div class="form-group">
                <label for="exampleFormControlTextarea1">Description*</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" name="campground[description]" rows="3" required></textarea>
                <div class="invalid-feedback">
                  Please provide a description of your campground.
                </div>
              </div>
              <div class="form-group">
                <label for="location">Location*</label>
                <input type="text" class="form-control" name="campground[location]" placeholder="Yosemite National Park, CA" id="location" required>
                <div class="invalid-feedback">
                  Please provide a valid location
                </div>
              </div>
              <div class="form-group">
                <label for="">Phone Number*</label>
                <input type="text" class="form-control" name="campground[phone]" placeholder="123-456-7891" required>
                <div class="invalid-feedback">
                  Please provide a phone number.
                </div>
              </div>
              <label for="">Booking Window*</label>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <input type="text" class="form-control" name="campground[start]" placeholder="Starting Month" required>
                  <div class="invalid-feedback">
                    Please provide a booking window.
                  </div>
                </div>
                <div class="form-group col-md-6">
                  <input type="text" class="form-control" name="campground[end]" placeholder="Ending Month" required>
                </div>
              </div>
              <div class="form-group">
                <label for="">Amenities separated by commas</label>
                <input type="text" class="form-control" name="campground[tags]" placeholder="Example: boating, fishing, wifi">
              </div>
              <button type="submit" class="btn btn-danger btn-block">Submit</button>
            </form>
            <a class="btn btn-link" href="/campgrounds">Go Back</a>
          </div>

        </div>

      </div>
      <div class="col">

      </div>
    </div>

  </div>

  <% include ../partials/footer %>